<style lang="stylus" rel="stylesheet/stylus" src="./gameSituation.styl"></style>
<template>
	<div class="accQuery gameSituation">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				<span class="title1">当前位置/游戏分析/实时数据/</span>
				<span>{{title}}</span>
			</div>
			<div class="right_header_time">
				<div class="block">
					<span>选择日期范围：</span>
					<el-date-picker
						size='small'
						v-model="date"
						type="daterange"
						align="left"
						placeholder="选择日期范围"
						@change='dateChange'
						:picker-options="pickerOptions"></el-date-picker>
				</div>
			</div>
			<div class="choose_plat">
				<el-menu :theme="this.$store.getters.theme[4]"  class="el-menu-demo" mode="horizontal" @select="handleSelect" :default-active="navDefault">
					<el-menu-item index="0" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>全平台</el-menu-item>
					<el-menu-item index="3" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>安卓</el-menu-item>
					<el-menu-item index="2" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>iOS</el-menu-item>
				</el-menu>
			</div>
		</div>
		<div class="right_content">
			<v-datils :datilsdata="datilsdata" v-if="datilsdata.length>0" :ref="datilsChild"></v-datils>
			<div style=" height: 134px;width: 100%;" v-if="datilsdataShow" v-loading="datilsdataShow" element-loading-text="拼命加载中"></div>
			<div class="listChart1">
				<div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
					<p class='zoomIn animated'>在线趋势</p>
					<div class="chart1-introduce">
						<a class="routerLink"  @click="introClick('javascript:void(0)')">详情</a>
						<el-popover
		              ref="listChart1_popo"
		              placement="top-start"
		              title="PCU/ACU"
		              width="200"
		              trigger="hover"
		              content="PCU/ACU">
							<p style="border-top:1px solid #cccccc;" v-for = "(value,key) in introduce1" :key="key">
								<span style="font-weight:bloder; font-size:13px;display:block;line-height:18px;font-weight:bolder;margin:5px 0;">{{value.title}}：</span>
								<span style="display:block;line-height:14px;text-indent: 2em;margin:5px 0;">{{value.message}}</span>
							</p>
						</el-popover> <i class="el-icon-information" v-popover:listChart1_popo></i>
					</div>
				</div>
				<div style="height:350px;width:100%;position:absolute;" v-if="pcuAcuLoading" v-loading="pcuAcuLoading" element-loading-text="拼命加载中"></div>
				<div class="realTimeData" id='realTimeData'></div>
			</div>

			<div class="right_content_charts">
				<div class="ChartsMore" v-for="(val,key) in chartsName" :key="key">
					<div class="listChart1_title" :style='{"background":$store.getters.theme[5],"color":$store.getters.theme[6]}'>
						<p class='zoomIn animated'>{{val.name}}</p>
						<el-menu :default-active="menuDefault[key]" class="el-menu-demo" mode="horizontal" theme="dark" @select="handle">
							<el-menu-item :index="key+'-1'" v-if="val.menuName.name1">
								{{val.menuName.name1}}
							</el-menu-item>
							<el-menu-item :index="key+'-2'" v-if="val.menuName.name2">
								{{val.menuName.name2}}
							</el-menu-item>
						</el-menu>
						<div class="chart1-introduce">
							<a class="routerLink"  @click="introClick(val.link)">详情</a>
							<el-popover
		                  placement="top-start"
			              :title="introduceTitle[key]"
			              width="300"
			              trigger="hover"
			              :content="introduceTitle[key]">
								<p style="border-top:1px solid #cccccc;" v-for = "(value,key1) in val.intro" :key="key1">
									<span style="font-weight:bloder; font-size:13px;display:block;line-height:18px;font-weight:bolder;margin:5px 0;">{{value.title}}：</span>
									<span style="display:block;line-height:14px;text-indent: 2em;margin:5px 0;">{{value.message}}</span>
								</p>
								<i slot="reference" class="el-icon-information"></i>
							</el-popover>
						</div>
					</div>
					<div class="realTimeDataLoading" style="height:350px;width:100%;position:absolute;" v-if="pcuAcuLoading" v-loading="pcuAcuLoading" element-loading-text="拼命加载中"></div>
					<div class="realTimeData" :id="val.className"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script src="./gameSituation.js"></script>